<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
	<view class="uni-container container">
		<form @submit="formSubmit" @reset="formReset">
			<view class="uni-common-mt">
				<view class="uni-form-item uni-column">
					<view class="title">username</view>
					<input class="uni-input" name="username" placeholder="这是一个输入框" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">password</view>
					<view class="uni-input-wrapper">
						<input type="password" name="password" class="uni-input" placeholder="输入密码"
							:value="inputClearValue" @input="clearInput" />
						<text class="uni-icon" v-if="showClearIcon" @click="clearIcon">&#xe434;</text>
					</view>
				</view>

				<view class="uni-btn-v">
					<button form-type="submit">Submit</button>
					<button type="default" form-type="reset">Reset</button>
				</view>

			</view>
		</form>

	</view>
</template>


<script>
	import {
		apis,
		routes
	} from '@/common/paths.js'
	export default {
		data() {
			return {
				user_token: null,
				title: 'input',
				focus: false,
				inputValue: '',
				showClearIcon: false,
				inputClearValue: '',
				changeValue: '',
				showPassword: true,
				isNvue: false,
			}
		},
		methods: {
			formSubmit: function(e) {
				uni.showLoading({
					title: '登录中'
				})
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				var formdata = e.detail.value
				uni.request({
					url: this.backendServer + apis['do_login'],
					method: 'post',
					// dataType:'application/json',
					data: {
						"username": formdata.username,
						"password": formdata.password
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
					},
					success: (res) => {
						uni.hideLoading()
						console.log('success res ', JSON.stringify(res))
						if (res.data.status) {
							console.log('request ok')
							uni.showToast({
								title: "登录成功",
								icon: 'success'
							})
							try {
								uni.setStorageSync('user_token', res.data.token);
								this.user_token = res.data.token
							} catch (e) {
								// error
							}
							//after login success
							// uni.reLaunch({
							// 	url.
							// })
							let beforeLoginLatestPage = uni.getStorageSync('beforeLoginLatestPage')
							if (beforeLoginLatestPage) {
								uni.removeStorageSync('beforeLoginLatestPage')
								uni.reLaunch({
									url: beforeLoginLatestPage
								})
							} else {
								uni.reLaunch({
									url: routes['index']
								})
							}
						} else {
							uni.showToast({
								title: "登录失败，请检查用户名或密码",
								icon: 'fail'
							})
							uni.removeStorageSync('user_token');
						}
					},
					fail: (res) => {
						uni.hideLoading()
						console.log('fail res ', res)
						uni.showToast({
							title: "登录失败，请检查网络联接",
							icon: 'fail'
						})
					}
				})
				// uni.showModal({
				// 	content: '表单数据内容：' + JSON.stringify(formdata),
				// 	showCancel: false
				// });
			},
			formReset: function(e) {
				console.log('清空数据')
			},
			onKeyInput: function(event) {
				this.inputValue = event.target.value
			},
			replaceInput: function(event) {
				var value = event.target.value;
				if (value === '11') {
					this.changeValue = '2';
				}
			},
			hideKeyboard: function(event) {
				if (event.target.value === '123') {
					uni.hideKeyboard();
				}
			},
			clearInput: function(event) {
				this.inputClearValue = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			},
			clearIcon: function() {
				this.inputClearValue = '';
				this.showClearIcon = false;
			},
			changePassword: function() {
				this.showPassword = !this.showPassword;
			}
			
		},
		onLoad() {
			this.platform = uni.getSystemInfoSync().platform
			// #ifdef APP-PLUS-NVUE
			this.isNvue = true
			// #endif
			console.log('user_token ', this.user_token);
			if (this.user_token) {
				//if already login , redirect to index 
				uni.redirectTo({
					url: routes['index']
				})
			}




			// uni.request({
			// 	url:this.backendServer+'/do_login',
			// 	method:'POST',
			// 	success:(res)=>{
			// 		console.log('success res ',res)
			// 	},
			// 	fail:(res)=>{
			// 		console.log('fail res ',res)
			// 	}
			// })
		}
	}
</script>


<style>
	.container {
		display: flex;
		flex-direction: row;
	}

	.uni-form-item .title {
		padding: 20rpx 0;
	}

	.uni-input {
		height: 28px;
		line-height: 28px;
		font-size: 15px;
		padding: 0px;
		flex: 1;
		background-color: #FFFFFF;
	}

	.uni-input-wrapper {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		/* display: flex; */
		flex-direction: row;
		flex-wrap: nowrap;

		/* height: 28px; */
		line-height: 28px;
		font-size: 15px;
		/* padding-top: 5px; */
		flex: 1;
		background-color: #FFFFFF;
	}

	.uni-eye-active {
		color: #007AFF;
	}
</style>